<template>
  <el-main>
    <div class="user_box">
      <el-form ref="form" :model="edit" label-width="120px" :rules="rules" label-position="left">
        <el-row>
          <el-form-item label="旧密码" prop="password_old">
            <el-col class="item_mr" :lg="24">
              <div class="user_item">
                <el-input v-model="edit.password_old" show-password placeholder="请输入内容">
                </el-input>
              </div>
            </el-col>
          </el-form-item>
          <el-form-item prop="password_new" label="登录密码">
            <el-col class="item_mr" :lg="24">
              <div class="user_item">
                <el-input v-model="edit.password_new" show-password placeholder="请输入内容">
                </el-input>
              </div>
            </el-col>
          </el-form-item>

          <el-form-item prop="password_new_two" label="确认密码">
            <el-col class="item_mr" :lg="24">
              <div class="user_item">
                <el-input v-model="edit.password_new_two" show-password placeholder="请输入内容">
                </el-input>
              </div>
            </el-col>
          </el-form-item>
        </el-row>

      </el-form>

      <el-row class="mrBor">
        <el-col style="margin-top: 38px" :lg="24">
          <el-button type="button" @click="back" class="context"
            style="width: 145px; background-color: #fff">取消</el-button>
          <el-button type="button" @click="save('form')" class="pubBtn3" style="margin-left: 40px; width: 145px">保存</el-button>
        </el-col>
      </el-row>
    </div>

  </el-main>
</template>

<script>
import { password } from "@/api";

export default {
  components: {
  },
  data() {
    var passwordPass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入新密码'));
      } else {
        //正则表达式判断密码应至少包含数字、大小写字母及特殊字符中的两种
        var reg = new RegExp(/^(?![0-9]+$)(?![a-zA-Z]+$)(?![^0-9a-zA-Z]+$)\S{6,20}$/);
        if (!reg.test(value)) {
          callback(new Error('密码应6位以上并且至少包含数字、大小写字母及特殊字符中的两种'));
        } else {
          callback();
        }
      }
    };
    var passwordPass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入新密码'));
      } else {
        if (value !== this.edit.password_new) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      }
    };
    return {
      edit: {
        password_old: "",
        password_new: "",
        password_new_two: "",
      },
      userId: '',
      rules: {
        password_new: [
          { required: true, validator: passwordPass, trigger: 'blur' }
        ],
        password_new_two: [
          { required: true, validator: passwordPass2, trigger: 'blur' }
        ],
        password_old: [
          { required: true, message: "请输入旧密码", trigger: "blur" },
        ],
      }
    };
  },
  async mounted() {
    this.userId = this.$store.state.user.id;
  },
  methods: {
    back() {
      this.$router.back();
    },
    save(formName) {
      try {
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            await password({
              id: this.userId,
              password_old: this.edit.password_old,
              password_new: this.edit.password_new,
              password_new_two: this.edit.password_new_two,
            });
            this.$message.success("修改成功");
            //定时器
            setTimeout(async () => {
              await this.$store.dispatch("user/resetToken");
              this.$router.push(`/web/index`);
              location.reload();
            }, 1000);
          } else {
            return false;
          }
        });
      } catch (e) {
        this.$message.error(e.message);
      }
    },
  },
};
</script>

<style scoped lang="less">
.el-main {
  margin: 30px 15px;
  height: 100vh;
}


.mrBor {
  border-top: 1px solid #e7eaf0;
  padding-top: 25px;
  margin-top: 25px;

  .zy {
    margin-bottom: 15px;
  }
}

.user_box {
  width: 600px;
  margin-left: 320px;

  .item_mr {
    margin-bottom: 20px;
  }

  .user_item {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .context {
      width: 120px;
      font-weight: 400;
    }

    .user_item_s {
      display: flex;
      align-items: center;

      .context {
        width: 150px;
        font-weight: 400;
      }

      .last {
        margin-left: 40px;
      }
    }
  }
}
</style>
